<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本连续光影特效</title>
  </head>
  <body>
    <div class="box">
      <span>C</span><span>O</span><span>L</span><span>O</span><span>R</span
      ><span>F</span><span>U</span><span>L</span>
    </div>
  </body>
</html>
<style>
  body {
    background-color: black;
  }

  .box {
    color: #fff;
    text-align: center;
    font-size: 50px;
    padding: 100px 0;
  }

  span {
    margin: 0 20px;
    animation: spread 1s ease-in-out infinite alternate;
  }

  @keyframes spread {
    to {
      color: #255;
      text-shadow: 20px 0 70px #255;
    }
  }
  /* 此处建议使用 less 或 sass 与编译器 进行动态循环设置 */
  span:nth-child(1) {
    animation-delay: 0s;
  }

  span:nth-child(2) {
    animation-delay: 0.2s;
  }

  span:nth-child(3) {
    animation-delay: 0.4s;
  }

  span:nth-child(4) {
    animation-delay: 0.6s;
  }

  span:nth-child(5) {
    animation-delay: 0.8s;
  }

  span:nth-child(6) {
    animation-delay: 1s;
  }

  span:nth-child(7) {
    animation-delay: 1.2s;
  }
</style>
